/* 信息页窗口 */
.MessageWindow {
    --controlLen: 414;
    /* 窗口宽度 */
    --windowWidth: calc(var(--controlLen, 414) * 1px * 0.9);
    /* 窗口最小高度 */
    --windowMinGHigh: calc(var(--controlLen, 414) * 1px * 0.8039);
    --ShadowHigh: calc(var(--windowWidth) * 0.0626);
    --ShadowColor: var(--BackgroundBlue, rgba(239, 242, 255, 1));

    /* flex-grow: 1; */
    height: 100%;
    /* 防止被撑开 */
    position: relative;
    width: var(--windowWidth);
}

.MessageWindow .messagePageWindow {
    position: absolute;
    width: var(--windowWidth);
    overflow: hidden;
    height: 100%;
    min-height: var(--windowMinGHigh);

}

/* 信息页列表 */
.MessageWindow .messagePageList {
    display: flex;
    overflow-y: hidden;
    overflow: scroll;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scroll-snap-stop: always;
    height: 100%;

    /* 隐藏滑动条 */
    scrollbar-width: none; /* firefox */
}

/* 信息页 */
.MessageWindow .messagePage {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    width: 100%;
    scroll-snap-align: center;
    /* scroll-snap-type: y mandatory; */
    scroll-behavior: smooth;
    overflow-y: scroll;
    height: 100%;

    /* 隐藏滑动条 */
    overflow-x: hidden;
    scrollbar-width: none; /* firefox */
}

.MessageWindow .messagePage::-webkit-scrollbar,
.MessageWindow .messagePageList::-webkit-scrollbar {
    display: none; /* Chrome Safari */
}

/* 子类盒 */
.MessageWindow .messageBlockBox {
    /* scroll-snap-align: start; */
    padding-top: 5%;
    padding-bottom: 5%;
}

.MessageWindow .frontShadow {
    position: absolute;
    top: 0;
    left: calc(var(--windowWidth) * -0.015);

    height: 100%;
    width: 5%;
    background: linear-gradient(90deg, var(--ShadowColor) 0%, var(--ShadowColor) 10%, rgba(0, 0, 0, 0) 100%);;
}

.MessageWindow .backShadow {
    position: absolute;
    top: 0;
    right: calc(var(--windowWidth) * -0.015);

    height: 100%;
    width: 5%;
    background: linear-gradient(-90deg, var(--ShadowColor) 0%, var(--ShadowColor) 10%, rgba(0, 0, 0, 0) 100%);;
}

.MessageWindow .topShadow {
    position: absolute;
    top: calc(var(--windowWidth) * -0.01);

    height: var(--ShadowHigh);
    width: 100%;
    background: linear-gradient(180deg, var(--ShadowColor) 0%, var(--ShadowColor) 10%, rgba(0, 0, 0, 0) 100%);;
}

.MessageWindow .bottomShadow {
    position: absolute;
    bottom: calc(var(--windowWidth) * -0.01);

    height: var(--ShadowHigh);
    width: 100%;
    background: linear-gradient(0deg, var(--ShadowColor) 0%, var(--ShadowColor) 10%, rgba(0, 0, 0, 0) 100%);;
}